<template>
  <div class="TRangePicker">
    <a-range-picker
      v-bind="$attrs"
      v-model="innerValue"
      :ranges="ranges"
      dropdownClassName="TRangePickerPopup"
      :locale="locale"
      :show-time="showTime"
      :format="format"
      v-on="$listeners"
    />
  </div>
</template>

<script>
import moment from "moment";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import vModelMixin from "@/mixin/v-model";
moment.locale("zh-cn");

export default {
  name: "TRangePicker",
  mixins: [vModelMixin],
  props: {
    ranges: {
      type: Object,
      require: false,
      default: () => {
        [moment(), moment()];
      },
    },
    showTime: {
      type: Object,
      require: false,
      default: () => {
        return {
          hideDisabledOptions: false,
          defaultValue: [moment("00:00:00", "HH:mm:ss"), moment("23:59:59", "HH:mm:ss")],
        };
      },
    },
    format: {
      type: String,
      require: false,
      default: "YYYY-MM-DD HH:mm:ss",
    },
  },
  data() {
    return {
      locale,
      defaultValue: [moment("00:00:00", "HH:mm:ss"), moment("11:59:59", "HH:mm:ss")],
    };
  },
  methods: {
    moment,
    // handlePanelChange2(value, mode) {
    //   this.innerValue = value;
    // },
  },
};
</script>

<style lang="scss">
.TRangePickerPopup {
  line-height: 33px;

  .ant-calendar {
    width: 100%;
  }

  .ant-calendar-date {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
  }

  .ant-tag-blue {
    background-color: white;
    border: none;
  }

  .ant-calendar-selected-day .ant-calendar-date,
  .ant-calendar-selected-day .ant-calendar-date:hover {
    color: #1d7ff2;
    background-color: white;
  }

  .ant-calendar-range.ant-calendar-time {
    .ant-calendar-time-picker {
      height: 323px;

      .ant-calendar-time-picker-panel,
      .ant-calendar-time-picker-select,
      .ant-calendar-time-picker-inner,
      .ant-calendar-time-picker-combobox {
        height: 100%;
      }

      .ant-calendar-time-picker-panel {
        height: 100%;
        padding: 0 12px;

        .ant-calendar-time-picker-select {
          width: 92px;
          border-right: 0;

          ul {
            width: 80px;

            li {
              height: 32px;
              padding: 0;
              margin-top: 8px;
              line-height: 32px;
              text-align: center;
            }
          }
        }
      }

      li.ant-calendar-selected-start-date.ant-calendar-selected-day .ant-calendar-date {
        color: #fff;
        background: #1d7ff2;
        border-radius: 20px;
      }

      li.ant-calendar-time-picker-select-option-selected {
        color: #1d7ff2;
        background: #e8f7ff;
        border-radius: 3px;
      }
    }
  }

  .ant-calendar-today {
    background-color: white;
    border-color: transparent;
    border-width: 0;
  }

  .ant-calendar-selected-start-date,
  .ant-calendar-selected-end-date,
  .ant-calendar-in-range-cell {
    color: #1d7ff2;
    background-color: #e8f7ff;
  }

  .ant-calendar-selected-start-date {
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
  }

  .ant-calendar-selected-end-date {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }

  .ant-calendar-selected-day .ant-calendar-date,
  .ant-calendar-selected-day:hover .ant-calendar-date {
    color: #fff;
    background-color: #1d7ff2;
  }

  //修改month选项
  .ant-calendar-month-panel-table {
    height: 100%;
  }

  .ant-calendar-month-panel-month {
    width: 36px;
    height: 36px;
    padding: 0;
    margin-top: 8px;
    font-size: 12px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
  }

  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
    color: #fff;
    background-color: #1d7ff2;
  }
}
</style>

<style lang="scss" scoped>
.TRangePicker {
  height: 100%;

  :deep(.ant-calendar-picker) {
    width: 100% !important;
  }

  :deep(.ant-input):focus,
  :deep(.ant-input):hover {
    border-color: #1d7ff2;
    box-shadow: none;
  }

  :deep(.ant-calendar-range-picker-input):focus {
    box-shadow: none;
  }
}
</style>
